<template>
  <div class="p-4">
    <a-card class="!mb-4">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input v-decorator="['id']" placeholder="请输入文章ID"> </a-input>
        </a-form-item>

        <a-form-item>
          <a-input v-decorator="['title']" placeholder="文章标题">
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-select
            v-decorator="['tags']"
            placeholder="请选择要查询的标签"
            mode="multiple"
            style="width: 200px"
          >
            <a-select-option v-for="tag in tags" :key="tag.id" :value="tag.id">
              {{ tag.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-select
            v-decorator="['createTime']"
            placeholder="创建时间排序"
            style="width: 200px"
          >
            <a-select-option value="DESC"> 由近到远 </a-select-option>
            <a-select-option value="ASC"> 由远到近 </a-select-option>
            <a-select-option :value="undefined"> 无 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-select
            v-decorator="['updateTime']"
            placeholder="更新时间排序"
            style="width: 200px"
          >
            <a-select-option value="DESC"> 由近到远 </a-select-option>
            <a-select-option value="ASC"> 由远到近 </a-select-option>
            <a-select-option :value="undefined"> 无 </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit"> 搜索 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <a-table
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1000 }"
        :size="navs.layoutSize"
        :pagination="pagination"
        bordered
        row-key="id"
        @change="handleTableChange"
      >
        <template slot="user" slot-scope="user">
          {{ user?.username }}
        </template>
        <template slot="tags" slot-scope="tags">
          <a-tag v-for="tag in tags" :key="tag.id" color="pink">
            {{ tag.name }}
          </a-tag>
        </template>

        <template slot="comment" slot-scope="comment">
          <div v-if="comment === 1">
            <a-badge status="success" />
            <span class="text-green-400">开启</span>
          </div>

          <div v-else>
            <a-badge status="danger" />
            <span class="text-red-400">关闭</span>
          </div>
        </template>

        <template slot="edit" slot-scope="row">
          <a-button type="link"> 编辑 </a-button>
        </template>

        <template slot="delete" slot-scope="row">
          <a-button type="link"> 删除 </a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
// import json from './data.json'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 60,
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '文章作者',
    dataIndex: 'user',
    key: 'user',
    scopedSlots: { customRender: 'user' },
    width: 100,
  },

  {
    title: '文章标签',
    dataIndex: 'tags',
    key: 'tags',
    scopedSlots: { customRender: 'tags' },
    width: 160,
  },
  {
    title: '浏览次数',
    dataIndex: 'view_count',
    key: 'view_count',
    width: 160,
  },
  {
    title: '是否开启评论',
    dataIndex: 'comment',
    key: 'comment',
    scopedSlots: { customRender: 'comment' },
    width: 130,
  },
  {
    title: '创建时间',
    key: 'create_time',
    dataIndex: 'create_time',
  },
  {
    title: '更新时间',
    dataIndex: 'update_time',
    key: 'update_time',
  },
  {
    title: '编辑',
    key: 'edit',
    scopedSlots: { customRender: 'edit' },
    width: 80,
    fixed: 'right',
  },
  {
    title: '删除',
    key: 'delete',
    scopedSlots: { customRender: 'delete' },
    width: 80,
    fixed: 'right',
  },
]
export default {
  layout: 'admin',
  async asyncData(context) {
    const { data } = await context.$apis.admin.getTags()
    return {
      tags: data,
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
      data: [],
      columns,
      pagination: {
        defaultCurrent: 1,
        pageSizeOptions: ['10', '20'],
        showQuickJumper: true,
        showSizeChanger: true,
        pageSize: 10,
        total: 0,
        itemRender(_current, type, originalElement) {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        },
      },
      // page: 1, // 当前页码
      searchForm: {
        // updateTime: 'DESC',
        createTime: 'DESC',
      },
    }
  },
  computed: {
    navs() {
      return this.$store.state.admin.navs
    },
  },
  mounted() {
    this.loadData({
      limit: this.pagination.pageSize,
      page: this.pagination.defaultCurrent,
    })
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.loadData({
        limit: this.pagination.pageSize,
        page: this.pagination.defaultCurrent,
      })
    },
    async loadData({ page, limit }) {
      const { data } = await this.$apis.admin.getArticles({
        page,
        limit,
        ...this.searchForm,
        ...this.form.getFieldsValue(),
      })
      this.data = data.list
      this.pagination.total = data.total
      // console.log(data)
    },
    handleTableChange(pagination) {
      this.loadData({
        limit: pagination.pageSize,
        page: pagination.current,
      })
    },
  },
}
</script>
